<template>
  <div class="dis">
    <!-- user 数据 -->
    <div class="disnav">
      <div @mouseenter="isshow = true" @mouseleave="isshow = false">
        <div class="user">
          <img :src="$axios.defaults.baseURL + pars.account.defaultAvatar" alt />
          <span class="name">{{pars.account.nickname}}</span>
          <span class="date">{{newDate}}</span>
          <span class="number">{{number-1}}</span>
        </div>
        <!-- 内容数据 -->
        <div class="ct">
          <span class="ctConten">{{pars.content}}</span>
          <div>
            <div v-for="(item,index) in pars.pics" :key="index" class="imgbox">
              <img :src="$axios.defaults.baseURL + item.url" alt />
            </div>
          </div>
          <div class="huifu">
            <span v-if="isshow" @click="getprId(pars.id,pars.account.nickname)">回复</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="pars.parent?show:!show">
      <par
        v-if="pars.parent"
        :pars="pars.parent"
        @getprId="getprId(pars.parent.id,pars.parent.account.nickname)"
        :number="number-1"
        :show="show"
      />
    </div>
  </div>
</template>

<script>
var moment = require("moment");
export default {
  name: "par",
  props: ["pars", "number", 'show'],
  data() {
    return {
      newDate: "",
      isshow: false,
    };
  },
  created() {
    console.log(this.show);
    this.newDate = moment(this.pars.created_at).format("YYYY-MM-DD  h:mm");
  },
  methods: {
    // 获取内层的id
    getprId(parid, nickname) {
      this.$emit("getprId", parid, nickname);
    },
  },
};
</script>

<style lang="less" scoped>
.dis {
  padding: 10px 0;
  background-color: #f9f9f9;
  .disnav {
    padding: 10px 10px 0;
  }
  // border: 1px solid #ccc;
  .user {
    padding-left: 10px;

    margin-bottom: 10px;
    span {
      font-size: 12px;
      color: #666;
      &.number {
        float: right;
        color: red;
        padding-right: 10px;
      }
    }
    img {
      width: 20px;
      height: 20px;
      object-fit: cover;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .ct {
    padding-left: 10px;
    .ctConten {
      display: inline-block;
      width: 100%;
      white-space: noweap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .huifu {
      height: 20px;
      overflow: hidden;
      span {
        margin-right: 10px;

        font-size: 12px;
        color: #1e50a2;
        float: right;
        cursor: pointer;
      }
    }
  }
  .imgbox {
    margin-top: 10px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px dashed #ccc;
    padding: 5px;
    display: inline-block;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>